<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    * {
        font-size: 16px
    }

    ol, ul {
        list-style: none;
    }

    .ft32 {
        font-size: 32px
    }

    .host-header {
        background: url(../../../img/data-bg.png) no-repeat center top #2b1a02;
        padding-bottom: 80px;
        color: #fff;
    }

    .wrap {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .color-gray {
        color: #999
    }

    .color-yello {
        color: #ff8e16 !important;
    }

    .mr10 {
        margin-right: 10px;
    }

    .row-main {
        padding: 20px;
        margin-top: 20px;
        background-color: #fff;
    }

    .baike-title {
        position: relative;
        border-bottom: 1px solid #f3f3f3;
        height: 44px;
        line-height: 24px;
        padding: 10px 0;
        padding-left: 20px;
        font-size: 16px;
        margin-top: 16px;
    }

    .baike-title:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 4px;
        height: 16px;
        margin-top: -8px;
        margin-top: -6px \0;
        border-radius: 4px;
        background-color: #ff8e16;
    }

    .mt0 {
        margin-top: 0 !important;
    }

    .row-tb {
        padding: 20px 0;
    }

    .divider-black {
        border-bottom: 1px solid #f3f3f3;
    }

    .col-25 {
        width: 25%;
        float: left;
    }

    .tc {
        text-align: center !important;
    }

    .fr {
        float: right;
    }

    .report-box .report-list {
        border-right: 1px solid #f3f3f3;
        overflow: hidden;
        margin: 30px 0;
    }

    .tab-toggle .current {
        color: #fff !important;
        background-color: #ff8e16 !important;
    }

    .btn-border.gray {
        color: #333;
        border-color: #e7e7e7;
    }

    .btn-s.btn-border {
        line-height: 20px;
    }

    .mr5 {
        margin-right: 5px !important;
    }

    .btn-border {
        color: #ff8e16;
        border: 1px solid #fee29c;
        transition: all .3s ease-in-out;
    }

    .btn-radius {
        border-radius: 4px;
        outline: 0;
    }

    .btn-s {
        font-size: 12px;
        height: 30px;
        line-height: 26px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .btn {
        display: inline-block;
        height: 30px;
        padding: 6px 6px;
        font-size: 14px;
        margin-bottom: 0;
        font-weight: normal;
        line-height: 16px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
    }

    .gray {
        color: #999;
    }

    .echarts-bar {
        height: 300px;
    }

    .gift-header {
        padding: 10px;
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #efefef;
    }

    .gift-list {
        padding: 6px;
        overflow-y: auto;
        height: 290px;
    }

    .tag {
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
        width: 22px;
        height: 22px;
        line-height: 20px;
        text-align: center;
        color: #999;
        border: 1px solid #d2d2d2;
        background-color: #ededed;
        font-family: 'simsun';
        border-radius: 50%;
    }

    .gift-box {
        border: 1px solid #efefef;
        margin-right: 12px;
    }

    .flexUlBar {
        display: flex;
        -webkit-flex-flow: row;
        -webkit-flex-wrap: nowrap;
        flex-flow: row;
        display: -webkit-box;
        display: -webkit-flex;
    }

    .flexUlBar .flex-li {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }

    .inline-block, .iconfont {
        display: inline-block;
        vertical-align: middle;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="fixed-table-toolbar">
                    <input type="hidden" id="userId" th:value="${userId}"/>
                    <div class="host-header">
                        <div class="wrap" style="padding:40px 20px;text-align: center;">
                            <div class="ft32" th:text="${userName}"></div>
                            <div><span class="color-gray mr10">所学课程</span>
                                <span class="color-yello mr10" th:text="${coursesName}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="wrap" style="margin-top: -100px;">
                        <div class="row-main">
                            <div class="baike-title mt0">
                                <div class="fl">总体情况</div>
                            </div>
                            <div class="row-tb row">
                                <ul class="report-box row divider-black">
                                    <li class="col-25 tc">
                                        <div class="report-list">
                                            <div class="inline-block">
                                                <p class="h2 mt20 color-yello" th:text="${totalDuration}+'秒'"></p>
                                                <p class="mt5">总时长</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="col-25 tc">
                                        <div class="report-list">
                                            <div class="inline-block">
                                                <p class="h2 mt20 color-yello" th:if="${testScores !=null}"
                                                   th:text="${testScores}+'分'"></p>
                                                <p class="h2 mt20 color-yello" th:if="${testScores ==null}">无</p>
                                                <p class="mt5">考试成绩</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="col-25 tc">
                                        <div class="report-list">
                                            <div class="inline-block">
                                                <p class="h2 mt20 color-yello" th:if="${practiceScores !=null}"
                                                   th:text="${practiceScores}+'分'"></p>
                                                <p class="h2 mt20 color-yello" th:if="${practiceScores ==null}">无</p>
                                                <p class="mt5">练习成绩</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="col-25 tc">
                                        <div class="report-list">
                                            <div class="inline-block">
                                                <p class="h2 mt20 color-yello" th:if="${state==0}">通过</p>
                                                <p class="h2 mt20 color-yello" th:if="${state==1}">未通过</p>
                                                <p class="mt5">通过状态</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row-main">
                            <div class="baike-title mt0" style="border:0">
                                学习时长趋势
                                <div class="fr tab-toggle" id="tab-toggle1">
                                    <span class="btn btn-s btn-radius gray btn-border mr5 current"
                                          data-type="0">近7天</span>
                                    <span class="btn btn-s btn-radius gray btn-border mr5" data-type="1">近30天</span>
                                </div>
                            </div>
                            <div class="row-tb row">
                                <div class="echarts-bar" id="giftDt1-trend"></div>
                            </div>
                            <!--<div class="row-tb row">-->
                                <!--<div class="echarts-bar" id="giftDt12-trend"></div>-->
                            <!--</div>-->
                        </div>
                        <!-- 章节学习详情 -->
                        <div class="row-main">
                            <div class="baike-title mt0" style="border:0">章节学习详情<i
                                    class="iconfont icon-shuoming color-yello mt-2 ml5 tip" data-tip="maxWorth"></i>
                            </div>
                            <div class="flexUlBar" id="rData">
                                <div class="flex-li gift-box">
                                    <div class="gift-header">
                                        <span class="tag mr10">1</span>
                                        <div class="mr5 ellipsis inline-block hidename">已完成章节</div>
                                    </div>
                                    <ul class="gift-list">
                                        <li th:each="item : ${yesMaps}">
                                            <span class="giftName" th:text="${item.chapterName}"></span>
                                            <span class="color-yello" th:text="'(学习时长：'+${item.chapterDuration}+'秒)'"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="flex-li gift-box">
                                    <div class="gift-header">
                                        <span class="tag mr10">2</span>
                                        <div class="mr5 ellipsis inline-block hidename">未完成章节</div>
                                    </div>
                                    <ul class="gift-list">
                                        <li th:each="item : ${noMaps}">
                                            <span class="giftName" th:text="${item.chapterName}"></span>
                                            <span class="color-yello" th:text="'(学习时长：'+${item.chapterDuration}+'秒)'"></span>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/echarts/echarts-all.js"></script>
<script type="text/javascript">
    getData(0);
    $(function () {
        //近7天和30天切换
        $(".btn-border").click(function () {
            var type = $(this).attr("data-type");
            getData(type);
            $(this).addClass("current");
            $(this).siblings().removeClass("current");
        })
    });

    function setEchart(x, y) {
        //最高在线趋势
        var chart = echarts.init(document.getElementById("giftDt1-trend"));
        var option = {
            noDataLoadingOption: {
                text: '暂无数据',
                effect: 'bubble',
                effectOption: {
                    effect: {
                        n: 0
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#16bc83'
                    }
                }
            },
            grid: {
                x: 50,
                y: 10,
                x2: 20,
                y2: 55,
                borderWidth: 0
            },
            legend: {
                show: false,
                data: []
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: x,
                    splitLine: {
                        lineStyle: {
                            color: ['rgba(255,255,255,0)'],
                            type: 'solid'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#16bc83',
                            width: '1'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    lineStyle: {
                        color: '#fff'
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#f1f1f1']
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#16bc83',
                            width: '0'
                        }
                    },
                    axisLabel: {formatter: '{value}秒'}
                    // axisLabel:{
                    // 	textStyle:{
                    // 		color: '#999',
                    // 	},
                    //    formatter: yFormat?yFormat:(function(value){
                    //    	return id=="msgUser-trend"?$.timeFormat(value):$.numFormat(value)
                    //    })
                    // }
                }
            ],
            series: [
                {
                    name: '学习时长',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            areaStyle: {type: 'default'},
                            borderColor: '#16bc83',
                            lineStyle: {
                                color: '#16bc83'
                            }
                        }
                    },
                    data: y
                }
            ],
            color: ['#adf9df']
        };
        chart.setOption(option);
    }

    function getData(type) {
        $.ajax({
            url: '/jzweb/trainingAgencyPage/learnRecords',
            data: {
                userId: $("#userId").val(),
                type: type
            },
            success: function (res) {
                console.log("res",res)
                setEchart(res.data.horizontalAxis, res.data.verticalAxis)
            }
        })
    }
</script>
</body>
</html>